﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxDemo.aspx.cs" Inherits="AjaxDemo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ajax Demo</title>
    <script src="Scripts/Ajax.js"></script>

    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script src="Scripts/ajaxjquey.js"></script>

    <style>
        p {
            margin: 8px;
            font-size: 16px;
        }

        .selected {
            color: blue;
        }

        .highlight {
            background: yellow;
        }

        .error {
            color: red;
        }

        .ok {
            color: green;
        }
    </style>
    <script type="text/javascript">
        (function ($) {
            $.extend({
                demoExt: {
                    checkUserName: function (userName) {
                        var dto = { "username": userName };
                        $.ajax({
                            url: 'api/api.asmx/JsonPerson_FindByUserName',
                            data: JSON.stringify(dto),
                            type: 'POST',
                            contentType: "application/json; charset=utf-8",
                            dataType: 'json',
                            success: function (result) {
                                var rt = result.d;
                                if (rt.Success) {
                                    $("#error").html('User name nay da ton tai. Chon Username khac');
                                    $("#error").addClass('error');
                                }
                                else {
                                    $("#error").html('User name nay san sang dang ky');
                                    $("#error").addClass('ok');
                                }
                            },
                            error: function (errormessage) {
                                $("#error").html(errormessage.responseText);
                            }
                        });
                        return false;
                    },
                    demo: function () { alert('Demo') }
                }
            });
        })(jQuery);

        $(document).ready(function () {
            // return $.demoExt.demo();
            var txtUserName = $("#txtUserName");
            txtUserName.blur(function () {
                $("#error").html(txtUserName.val());
                return $.demoExt.checkUserName(txtUserName.val());
            });
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <h1>Ajax Demo (Ajax Core)</h1>
        Time Now:
        <asp:Label ID="lblTime" runat="server" Text=""></asp:Label>
        <input type="button" value="Time Server (Call Ajax)" onclick="return callServerTime()" />
        <input type="button" value="Get Data Ajax" onclick="return getContent('Default.aspx')" />
        <div id="ajax-demo"></div>
        <p>
        </p>
        <h1>Ajax Jquery</h1>
        <p>

            <input type="button" value="Time Server (Call Ajax)" onclick="return callServerTimeJquery()" />
            <input type="button" value="Get Data Ajax Jquery" id="btnAjaxJquery" />
            <div id="ajaxjquery"></div>
       UserName:     <input type="text" id="txtUserName" />
            <div id="error"></div>
        </p>
    </form>
</body>
</html>
